<template>
	<view style="padding: 15px;">
		<view class="permission-alert" id="permission-alert"
			style="width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5);position: fixed;top: 0;left: 0;z-index: 3;"
			v-if="isPermissionAlertShow">
			<view class="uni-popup__wrapper-box">
				<view class="title">手机状态权限申请说明：</view>
				<view class="content">便于您使用该功能上传您的照片/图片/视频及用于更换头像、保存相册、项目上传/分享、下载等场景中读取和写入相册和文件内容。</view>
			</view>
		</view>
		<uni-forms ref="form" :modelValue="form" :rules="rules" label-position="top" label-width="180">
			<uni-forms-item label="反馈内容" name="ContentInfo" required>
				<uni-easyinput type="textarea" v-model="form.ContentInfo" placeholder="请输入反馈内容" :maxlength="500"
					autoHeight>
				</uni-easyinput>
				<span style="position: relative;float: right;user-select: none;z-index: 999;top: 0;font-size: 14px">
					<span :style="{ color:textColor }">{{ form.ContentInfo.length }}</span>/500
				</span>
			</uni-forms-item>
			<uni-forms-item label="图片附件(最多上传三张图片)" name="email">
				<uni-file-picker v-model="form.imgs" fileMediatype="image" mode="grid" @select="imgselect"
					:auto-upload="false" :sizeType="['compressed']" limit="3" @error="error" />
			</uni-forms-item>
			<uni-forms-item label="视频附件(最多上传两个视频)" name="email">
				<uni-file-picker v-model="form.video" fileMediatype="video" mode="grid" @select="videoselect"
					:auto-upload="false" :sizeType="['compressed']" limit="2" @click="click" @error="error" />
			</uni-forms-item>
		</uni-forms>

		<button type="warn" @click="SubmitEvent">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules: {
					ContentInfo: {
						rules: [{
							required: true,
							errorMessage: '请输入内容'
						}]
					},
				},

				form: {
					ContentInfo: "",
					imgs: [],
					video: []
				},
				// permissionListener: null,
				isPermissionAlertShow: false,
			}
		},
		computed: {
			textColor() {
				// 根据是否超出最大字数返回不同的颜色
				return this.form.ContentInfo.length >= 500 ? 'red' : 'black'
			}
		},
		onReady() {
			// this.watchPermission()
			this.permissionListener = uni.createRequestPermissionListener();
			this.permissionListener.onConfirm(() => {
				this.isPermissionAlertShow = true
			});
			this.permissionListener.onComplete(() => {
				this.isPermissionAlertShow = false
			});
		},
		onUnload() {
			if (this.permissionListener) {
				this.permissionListener.stop()
			}
		},
		methods: {
			error() {
				uni.showToast({
					title: `文件选择失败，请确认是否开启相机或文件权限`,
					icon: 'none'
				})
			},
			click() {
				console.log('111111');
			},
			async UploadFile(Id, file) {
				await uni.uploadFile({
					url: this.$url + 'Base_Manage/Base_VIPUserFeedBack_FAL/OssUploadFileByForm?feedBackId=' +
						Id,
					filePath: file,
					name: 'file',
					header: {
						Authorization: uni.getStorageSync('tokenKey')
					},
				}).then(data => {
					var [err, res] = data;
					console.log(res);
				})
			},
			SubmitEvent() {
				console.log(this.form);
				this.$refs.form.validate().then(res => {
					uni.showLoading({
						title: '提交中',
						mask: true
					});
					this.$http('Base_Manage/Base_VIPUserFeedBack/SaveData', {
						ContentInfo: this.form.ContentInfo,
					}).then(val => {
						if (val.Success) {
							let arr = [...this.form.imgs, ...this.form.video]
							let narr = []
							arr.forEach(item => {
								narr.push(this.UploadFile(val.Data.Id, item.url))
							})
							Promise.all(narr).then(data => {
								uni.hideLoading()
								setTimeout(() => {
									uni.showToast({
										title: `提交完成`
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 500)
								}, 1)
							}).catch(erdata => {
								setTimeout(() => {
									uni.showToast({
										title: erdata
									})
									uni.navigateBack()
								}, 1)
							})
						} else {
							uni.hideLoading()
						}
					})
				})
			},
			imgselect(progress) {
				console.log(progress)
				this.form.imgs.push({
					...progress.tempFiles[0]
				})
			},

			videoselect(progress) {
				this.form.video.push({
					...progress.tempFiles[0]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ uni-button[type=primary] {
		background-color: #e64340;
	}

	.PermissionAlert {
		position: fixed;
		top: 10%;
		left: 0;
	}

	.uni-popup__wrapper-box {
		padding: 10vh 3vh 100vh;
		color: white;

		.title {
			font-size: 36rpx;
			font-weight: bold;
		}

		.content {
			margin-top: 18rpx;
			line-height: 1.6;
		}
	}

	.permission-alert {
		// width: 650rpx;
		// height: 200rpx;
		// margin: 20rpx 40rpx;
		// position: absolute;
		// top: 0px;
		// z-index: 3;
		// border-radius: 5px;
		// transition-property: transform;
		// transition-duration: 200ms;
		// background-color: white;
		// padding: 10rpx;
	}
</style>